body {
  background-color: #eeeeee;
  height: 100%;
  position: relative;
}
/* 导航菜单 */
.navbar > ul {
  display: flex;
  flex-direction: row;
  list-style: none;
}
.navbar > ul > li {
  flex: 1;
  text-align: center;
  height: 50px;
  line-height: 50px;
  background-color: #fafafa;
}
.navbar > ul > li:hover {
  cursor: pointer;
  background-color: #ecf5ff;
}
.navbar .active {
  color: #409eff;
  border-bottom: 3px solid #409eff;
}
.content {
  padding: 60px;
}
.content > ul > li {
  display: none;
}
.content .active {
  display: block;
}
/* 笑脸logo */
.m-img {
  position: absolute;
  top: 70px;
  left: 30px;
  z-index: 999;
}

/* 布局 1 */
.layout1 {
  text-align: center;
  height: 75vh;
}
.layout1 .container {
  border-radius: 5px;
  height: 100%;
  background-color: #a0cfff;
}

/* 布局 2 */
.layout2 {
  text-align: center;
  height: 75vh;
}
.layout2 .header {
  height: 20%;
  border-radius: 5px 5px 0 0;
  background-color: #337ecc;
}
.layout2 .container {
  height: 70%;
  background-color: #a0cfff;
}
.layout2 .footer {
  height: 10%;
  border-radius: 0 0 5px 5px;
  background-color: #337ecc;
}

/* 布局 3 */
.layout3 {
  display: flex;
  text-align: center;
  height: 75vh;
}
.layout3 .sidebar {
  flex: 2;
  height: 100%;
  border-radius: 5px 0 0 5px;
  background-color: #337ecc;
}
.layout3 .container {
  flex: 8;
  height: 100%;
  border-radius: 0 5px 5px 0;
  background-color: #a0cfff;
}

/* 布局 4 */
.layout4 {
  text-align: center;
  height: 75vh;
}
.layout4 .header {
  height: 20%;
  border-radius: 5px 5px 0 0;
  background-color: #337ecc;
}
.layout4 .container {
  height: 70%;
  display: flex;
  text-align: center;
}
.layout4 .container .sidebar {
  flex: 2;
  background-color: #79bbff;
}
.layout4 .container .content {
  flex: 8;
  background-color: #a0cfff;
}
.layout4 .footer {
  height: 10%;
  border-radius: 0 0 5px 5px;
  background-color: #337ecc;
}

/* 布局 5 */
.layout5 {
  text-align: center;
  height: 75vh;
}
.layout5 .header {
  height: 20%;
  border-radius: 5px 5px 0 0;
  background-color: #337ecc;
}
.layout5 .header-bottom {
  height: 15%;
  background-color: rgb(4, 72, 141);
}
.layout5 .container {
  height: 55%;
  display: flex;
  text-align: center;
}
.layout5 .container .left {
  flex: 1;
  background-color: #79bbff;
}
.layout5 .container .center {
  flex: 8;
  background-color: #a0cfff;
}
.layout5 .container .right {
  flex: 1;
  background-color: #79bbff;
}
.layout5 .footer {
  height: 10%;
  border-radius: 0 0 5px 5px;
  background-color: #337ecc;
}
